<template>
  <div class="flex flex-center" >
    <div  class="tw-w-full md:tw-w-1/2  q-mt-lg">
      <v-md-preview  style="width: 100%;margin: auto" :text="text" />
    </div>
  </div>
</template>

<script>
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
import { useRouter } from "vue-router";
export default {
  // name: 'PageName',
  components:{
    VMdPreview
  },
  setup(){
    VMdPreview.use(githubTheme,{
      Hljs:hljs
    })
    const $router = useRouter();
    let articles = JSON.parse(sessionStorage.getItem('articles'))
    let id = $router.currentRoute.value.params.id
    let text = articles[id]['content']

    // let text = "# This is H1\n" +
    //   "\n" +
    //   "\n" +
    //   "\n" +
    //   "## this is h2\n" +
    //   "\n" +
    //   "\n" +
    //   "\n" +
    //   "1. list 1\n" +
    //   "2. ![](http://localhost:5555/avtar.jpg)\n" +
    //   "\n" +
    //   "\n" +
    //   "\n" +
    //   "```python\n" +
    //   "import os \n" +
    //   "print(os.listdir())\n" +
    //   "```\n" +
    //   "\n" +
    //   "\n" +
    //   "\n" +
    //   "```c++\n" +
    //   "#inlcude \"iostream\"\n" +
    //   "int main(){\n" +
    //   "    std::cout<<\"hello\";\n" +
    //   "    return 0\n" +
    //   "}\n" +
    //   "```\n" +
    //   "\n"
    return {
      text
    }
  }
}
</script>
